<template>
	<view class="misc-issue-detail-container">
		<view class="page-header">
			<text class="page-title">{{ issueCode }}</text>
		</view>

		<view class="line-info-section" v-if="lineInfo">
			<view class="info-header">
				<text class="info-title">物料信息</text>
				<view class="line-status" :class="getLineStatusClass()">{{ getLineStatusText() }}</view>
			</view>
			<view class="info-content">
				<view class="content-grid">
					<view class="grid-item">
						<text class="item-label">物料编码</text>
						<text class="item-value">{{ lineInfo.itemCode }}</text>
					</view>
					<view class="grid-item">
						<text class="item-label">物料名称</text>
						<text class="item-value">{{ lineInfo.itemName }}</text>
					</view>
					<view class="grid-item full-width">
						<text class="item-label">规格型号</text>
						<text class="item-value">{{ lineInfo.specification }}</text>
					</view>
					<view class="grid-item">
						<text class="item-label">单位</text>
						<text class="item-value">{{ lineInfo.unitName || '' }}</text>
					</view>
					<view class="grid-item">
						<text class="item-label">出库数量</text>
						<text class="item-value">{{ getActualIssuedQuantity() }}/{{ lineInfo.quantityIssue }}</text>
					</view>
					<view class="grid-item progress-item">
						<text class="item-label">出库进度</text>
						<view class="progress-info">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: getProgressWidth() + '%' }"></view>
							</view>
							<text class="progress-text">{{ Math.round(getProgressWidth()) }}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="details-section" v-if="issueDetails.length > 0">
			<view class="section-header">
				<text class="section-title">出库明细列表</text>
				<text class="section-count">共 {{ issueDetails.length }} 条</text>
			</view>
			<view class="details-list">
				<view class="detail-item" v-for="(detail, index) in issueDetails" :key="detail.detailId || index">
					<view class="item-header">
						<view class="item-title">
							<text class="item-number">#{{ index + 1 }}</text>
						</view>
					</view>
					<view class="item-content">
						<view class="content-row warehouse-info">
							<text class="row-label">出库仓库</text>
							<text class="row-value">{{ detail.warehouseName }}</text>
						</view>
						<view class="content-row">
							<text class="row-label">库区</text>
							<text class="row-value">{{ detail.locationName }}</text>
						</view>
						<view class="content-row">
							<text class="row-label">库位</text>
							<text class="row-value">{{ detail.areaCode }}</text>
						</view>
						<view class="content-row">
							<text class="row-label">出库数量</text>
							<text class="row-value">{{ detail.quantity }} {{ lineInfo.unitName || '' }}</text>
						</view>
						<view class="content-row" v-if="detail.batchCode">
							<text class="row-label">批次号</text>
							<text class="row-value">{{ detail.batchCode }}</text>
						</view>
						<view class="content-row" v-if="detail.sn">
							<text class="row-label">SN</text>
							<text class="row-value">{{ detail.sn }}</text>
						</view>
						<view class="content-row" v-if="detail.remark">
							<text class="row-label">备注</text>
							<text class="row-value">{{ detail.remark }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-state" v-if="issueDetails.length === 0">
			<uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
			<text class="empty-text">暂无出库明细</text>
		</view>
	</view>
</template>

<script>
import { getMiscIssueDetail } from '@/api/wm/miscissue'

export default {
	name: 'MiscIssueDetail',
	data() {
		return {
			issueId: '',
			issueCode: '',
			lineId: '',
			lineInfo: null,
			issueDetails: []
		}
	},
	onLoad(options) {
		this.issueId = options.issueId || ''
		this.issueCode = options.issueCode || ''
		this.lineId = options.lineId || ''
		this.loadLineData()
	},
	methods: {
		loadLineData() {
			if (!this.lineId) {
				uni.showToast({ title: '缺少行ID参数', icon: 'none' })
				return
			}
			uni.showLoading({ title: '加载中...' })
			getMiscIssueDetail(this.lineId).then(response => {
				const data = response.data || {}
				this.lineInfo = data.issueLine || data.recptLine || data.line
				this.issueDetails = data.issueDetails || data.details || []
			}).catch(error => {
				console.error('加载行数据失败:', error)
				if (error !== '500') {
					uni.showToast({ title: '网络异常，请检查网络连接后重试', icon: 'none', duration: 3000 })
				}
			}).finally(() => {
				uni.hideLoading()
			})
		},
		getActualIssuedQuantity() {
			if (!this.issueDetails || !Array.isArray(this.issueDetails)) return 0
			return this.issueDetails.reduce((t, d) => t + (parseFloat(d.quantity) || 0), 0)
		},
		getProgressWidth() {
			if (!this.lineInfo) return 0
			const planned = this.lineInfo.quantityIssue || 0
			const actual = this.getActualIssuedQuantity()
			if (planned === 0) return 0
			return Math.min(100, (actual / planned) * 100)
		},
		getLineStatusText() {
			if (!this.lineInfo) return ''
			const planned = this.lineInfo.quantityIssue || 0
			const actual = this.getActualIssuedQuantity()
			if (actual === 0) return '待出库'
			if (actual < planned) return '部分出库'
			return '完全出库'
		},
		getLineStatusClass() {
			if (!this.lineInfo) return ''
			const planned = this.lineInfo.quantityIssue || 0
			const actual = this.getActualIssuedQuantity()
			if (actual === 0) return 'line-status-pending'
			if (actual < planned) return 'line-status-partial'
			return 'line-status-completed'
		}
	}
}
</script>

<style lang="scss" scoped>
.misc-issue-detail-container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.page-header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
	}
}

.line-info-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.line-status {
		padding: 6rpx 12rpx;
		border-radius: 16rpx;
		font-size: 20rpx;

		&.line-status-pending { background: #fff3cd; color: #856404; }
		&.line-status-partial { background: #d1ecf1; color: #0c5460; }
		&.line-status-completed { background: #d4edda; color: #155724; }
	}
}

.info-content {
	.content-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx 20rpx;

		.grid-item {
			display: flex;
			flex-direction: column;

			.item-label { font-size: 22rpx; color: #666; margin-bottom: 6rpx; }
			.item-value { font-size: 24rpx; color: #333; font-weight: 500; word-break: break-all; line-height: 1.4; }

			&.full-width { grid-column: 1 / -1; }

			&.progress-item {
				grid-column: 1 / -1;

				.progress-info {
					display: flex;
					flex-direction: column;
					gap: 8rpx;

					.progress-bar {
						height: 8rpx;
						background: #e9ecef;
						border-radius: 4rpx;
						overflow: hidden;

						.progress-fill {
							height: 100%;
							background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
							border-radius: 4rpx;
							transition: width 0.3s ease;
						}
					}

					.progress-text {
						font-size: 22rpx;
						color: #28a745;
						font-weight: bold;
						text-align: center;
					}
				}
			}
		}
	}
}

.details-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;

	.section-title { font-size: 32rpx; font-weight: bold; color: #333; }
	.section-count { font-size: 24rpx; color: #666; }
}

.details-list {
	.detail-item {
		border: 1rpx solid #e8e8e8;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 16rpx;
		background: #fff;
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);

		&:last-child { margin-bottom: 0; }

		.item-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.item-title { display: flex; align-items: center; }
			.item-number { font-size: 24rpx; color: #666; background: #f8f9fa; padding: 4rpx 12rpx; border-radius: 12rpx; font-weight: 500; }
		}

		.item-content {
			.content-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 6rpx 0;
				border-bottom: 1rpx solid #f8f9fa;

				&:last-child { border-bottom: none; }

				&.warehouse-info {
					background: #fff8f8;
					margin: 0 -20rpx 8rpx;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
					border-bottom: 1rpx solid #ffecec;

					.row-label,
					.row-value { color: #c0392b; font-weight: 600; }
				}

				.row-label { font-size: 24rpx; color: #666; flex-shrink: 0; }
				.row-value { font-size: 24rpx; color: #333; text-align: right; word-break: break-all; }
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 40rpx;
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

	.empty-text { font-size: 28rpx; color: #999; margin-top: 20rpx; }
}
</style>


